<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('sidebar.management.token-manager')}} </h2>
        </template>
        <template v-slot:header-right>
            <el-button @click="onCreateClick" type="success" icon="el-icon-circle-plus">{{i18n('token_manager.create-new-token')}}</el-button>
        </template>
    </cly-header>
    <cly-main>
        <cly-section>
            <cly-datatable-n :rows="tableData">
                <template v-slot="scope">
                    <el-table-column sortable="custom" prop="purpose" :label="i18n('token_manager.table.purpose')">
                        <template slot-scope="scope">
                            <p>{{scope.row.purpose}}</p>
                            <p class="text-small color-cool-gray-40">{{scope.row._id}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="status" :label="i18n('token_manager.table.status')">
                        <template slot-scope="scope">
                            <cly-status-tag :text="i18n('token_manager.table.status-' + scope.row.status)" :color="getColor(scope.row.status)">
                            </cly-status-tag>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="ends" column-key="ttlDate" :label="i18n('token_manager.table.ends')">
                        <template slot-scope="scope">
                            <p>{{scope.row.ttlDate}}</p>
                            <p class="text-small color-cool-gray-40">{{scope.row.ttlTime}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="multi" :label="i18n('token_manager.table.multi')">
                        <template slot-scope="scope">
                            {{scope.row.multi}}
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="app" :label="i18n('token_manager.table.app')">
                        <template slot-scope="scope">
                            {{scope.row.app}}
                        </template>
                    </el-table-column>
                    <el-table-column sortable="custom" prop="endpoint" :label="i18n('token_manager.table.endpoint')">
                        <template slot-scope="scope">
                            {{scope.row.endpoint}}
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <cly-more-options @command="onDelete(scope.row)" size="small">
                                <el-dropdown-item>{{i18n('token_manager.table.delete-token')}}</el-dropdown-item>
                            </cly-more-options>
                        </template>
                    </el-table-column>
                </template>
            </cly-datatable-n>
        </cly-section>
        <main-drawer :controls="drawers.main" @create="refresh"></main-drawer>
    </cly-main>
</div>